<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天</title>
    <link rel="stylesheet" href="/static/customer/css/index.css">
</head>
<body>
<div class="main">
    <div class="top">
        <div class="top-left">
            <div class="header">
				<img style="width: 50px;height: 50px;border-radius: 50%;" src="/static/customer/images/1541137331884.jpg" alt="">
			</div>
            <div class="search">
				<form action="" method="">
					<input type="text" placeholder="搜索">
				</form>
            </div>
        </div>
        <div class="top-type">
            <a href="#" class="news icon-site"></a>
            <a href="#" class="friend icon-site"></a>
            <a href="#" class="file icon-site"></a>
        </div>
        <div class="top-right">
            <i class="ic-menu ic-same"></i>
            <i class="ic-shrink ic-same"></i>
            <i class="ic-boost ic-same"></i>
            <i class="ic-close ic-same"></i>
        </div>
    </div>
    <div class="box">
        <div class="chat-list">
            <div class="list-box">
                <img class="chat-head" src="/static/customer/images/1541137331884.jpg" alt="">
                <div class="chat-rig">
                    <p class="title">公众号</p>
                    <p class="text">紧急！！！</p>
                </div>
            </div>
            <div class="list-box select"><img class="chat-head" src="/static/customer/images/1541137331884.jpg" alt="">
                <div class="chat-rig"><p class="title">宋温暖</p>
                    <p class="text">在？</p></div>
            </div>
            <div class="list-box"><img class="chat-head" src="/static/customer/images/1541137329139.jpg" alt="">
                <div class="chat-rig"><p class="title">安安安</p>
                    <p class="text">你好，我这里有个任务帮我做一下</p></div>
            </div>
            <div class="list-box">
                <img class="chat-head" src="/static/customer/images/1541137329139.jpg" alt="">
                <div class="chat-rig">
                    <p class="title">公众号</p>
                    <p class="text">紧急！！！</p>
                </div>
            </div>
        </div>
        <div class="box-right">
            <div class="recvfrom">
                <div class="nav-top">
                    <p>公众号</p>
                </div>
                <div class="news-top">
                  <ul class="msg_box"></ul>
                </div>
            </div>
            <div class="sendto">
                <div class="but-nav">
                    <ul>
                        <li class="font"></li>
                        <li class="face"></li>
                        <li class="cut"></li>
                        <li class="page"></li>
                        <li class="old"></li>
                    </ul>
                </div>
                <div class="but-text op_box">
                    <textarea name="msg" placeholder="请输入消息" id="" cols="110" rows="6"></textarea>
                    <a href="#" class="button send_btn">发送</a>
                </div>
            </div>
        </div>
 
    </div>
 
 
</div>
 
</body>
</html>
<script type="text/javascript" src="/static/customer/js/jquery.js">
	
</script>
<script>
    var data='';
    var name = '娜娜';
    var touser= '胯下有枪';

    $('title').html('您是：'+name+'正在与'+touser+'聊天_'+$('title').html());

    if(name){
        var ws = new WebSocket("ws://121.4.90.66:9502");

        ws.onopen = function(evt) {
            console.log("Connection open ...");
            //ws.send("Hello WebSockets!");
            data={'name':name,'type':'bind'}
            ws.send(JSON.stringify( data ));
        };

        ws.onmessage = function(evt) {
            console.log( "Received Message: " + evt.data);
            dataObj=eval('('+evt.data+')');
            $('.msg_box').append('<li>'+dataObj.name+':'+dataObj.data+'</li>')
            //ws.close();
        };
        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };
        ws.onerror = function(evt) {
            console.log('error');
        };
    }


    $('.send_btn').click(function(){
        var msg=$('textarea').val();
        if(msg){
            data={'name':name,'msg':msg,'type':'msg','touser':touser}
            ws.send(JSON.stringify( data ));
            $('textarea').val('');
        }
    });

    document.onkeydown=function(event){
        if(event.keyCode==13)
        {
            $('.send_btn').click();
            return false;
        }
    }
</script>